<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>我的关注</title>
    <link th:href="@{/webjars/jquery.3.4.1/jquery.js}" rel="stylesheet">
    <link th:href="@{/webjars/bootstrap/4.3.1/css/bootstrap.css}" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css" rel="stylesheet">
    <link th:href="@{/css/article.css}" rel="stylesheet">
    <link th:href="@{/css/person.css}" rel="stylesheet">
    <link th:href="@{/css/head.css}" rel="stylesheet" >
    <link th:href="@{/css/foot.css}" rel="stylesheet">
    <link th:href="@{/css/bootstraps.css}" rel="stylesheet"/>
</head>
<body>
<!--引入导航栏-->
<div th:include="/common/head :: top"></div>

<!-- 个人简介 -->
<div style="clear: both;"></div>
<!--中间的内容-->

<div id="contentLeft">
    <nav class="category">
        <ul class="introduction">
            <li><span id="person"><img style="width: 80px;height: 80px;" th:src="@{${user.userProfilePhoto}}"
                                       class="ui avatar image" /></span></li>
            <li><a>昵称: [[${user.userName}]] </a></li>
            <li><a th:href="@{'/concern/' + ${user.userId}}">关注: [[${concernNumber}]] </a></li>
            <li><a th:href="@{'/fans/' + ${user.userId}}">粉丝: [[${fansNumber}]] </a></li>
            <li><a th:href="@{'/person/' + ${user.userId}}">文章: [[${articleNumber}]] </a></li>
            <li><a th:href="@{'/collect/' + ${user.userId}}">我的收藏: [[${collectNumber}]] </a></li>
            <li><a>个人介绍: [[${user.userIntroduction}]]</a></li>
            <div th:if="${user.userName} != ${session.loginUser.userName}">
                <input id="userId" type="hidden" name = "userId"
                       th:value="${session.loginUser.userId}" />
                <input id="userFriendId" type="hidden" name = "userFriendId"
                       th:value="${user.userId}" />

                <div class="text-center">
                    <button class="btn btn btn-success" id="addUserConcernBtn"
                            th:if="${b} == false">关注</button>
                </div>
                <div class="text-center">
                    <button class="btn btn btn-success" id="cancelUserConcernBtn"
                            th:if="${b} == true">取消关注</button>
                </div>
            </div>

            <form method="post" th:action="@{'/settings'}">
                <input class="btn btn-success" th:value="修改" th:type="submit"
                       th:if="${user.userName} == ${session.loginUser.userName}">
            </form>
        </ul>
        <hr style="border-bottom: 3px rgb(231, 231, 231) solid;"/>
        <ul class="introduction">
            <li><a>文章分类</a></li>
            <li th:each="list : ${category}">
                <a th:href="@{'/article/category'(userId=${user.userId},sortId=${list.id})}"
                   th:text="${list.name} + '('+ ${list.number} + '篇' +')' "></a>
            </li>
        </ul>
        <hr style="border-bottom: 3px rgb(231, 231, 231) solid;"/>
        <ul class="introduction">
            <li><a>文章数: [[${articleNumber}]]</a></li>
            <li th:each="list : ${articleList}">
                <a th:href="@{'/article/detail/' + ${list.articleId}}" th:text="${list.articleTitle}"></a>
            </li>
        </ul>
    </nav>


    <div class="row">
        <div th:each="list : ${concern}" style="width: 48%; margin-left: 60px;">
            <hr style="border-bottom: 1px rgb(231, 231, 231) solid;"/>
            <div style="float: left; height: 100px">
                <a th:href="@{'/person/' + ${list.user.userId}}">
                    <img style="width: 80px; height: 80px; margin-top: 20px;"
                        th:src="@{${list.user.userProfilePhoto}}" alt="" class="ui avatar image">
                </a>
            </div>
            <div style="float: right;height: 100px;">
                <p>昵称：[[${list.user.userName}]]</p>
                <p>介绍：[[${list.user.userIntroduction}]]</p>
            </div>
        </div>
    </div>

    <br><br>

    <div style="float: left;margin-left: 180px;" th:if="${concernNumber} > 0">
        <ul class="pagination">
            <li><a th:href="@{'/concern/'+${user.userId}(pageNum=1)}">首页</a></li>
            <li><a th:href="@{'/concern/'+${user.userId}(pageNum=${pageInfo.hasPreviousPage}
                                ?${pageInfo.prePage}:1)}">上一页</a></li>
            <li><a th:each="i : ${#numbers.sequence(1,pageInfo.pages)}"
                   th:href="@{'/concern/'+${user.userId}(pageNum=${i})}">[[${i}]]</a></li>
            <li><a th:href="@{'/concern/'+${user.userId}(pageNum=${pageInfo.hasNextPage}
                                ?${pageInfo.nextPage}:${pageInfo.pages})}">下一页</a></li>
            <li><a th:href="@{'/concern/'+${user.userId}(pageNum=${pageInfo.pages})}">尾页</a></li>
        </ul>
    </div>

</div>



    <!--引入底部栏-->
    <div th:include="/common/foot :: foot"></div>
</body>
    <script th:src="@{/js/bootstrap.min.js}"></script>
    <script th:src="@{/js/jquery.min.js}"></script>

    <script>
    // 增加用户关注事件
    $('#addUserConcernBtn').click(function() {
        var userId = $('#userId').val();
        var userFriendId = $('#userFriendId').val();
        var json = {
            userId: userId,
            userFriendId: userFriendId
        };
        $.ajax({
            type: "POST",
            dataType: "json",
            contentType: "application/json;charset=utf-8",
            url: "http://localhost:8081/user/concern",
            data: JSON.stringify(json),
            success: function() {
                // 刷新页面
                alert("添加成功");
                location.reload();
            },
            error: function() {
                location.reload();
            }
        });
    });

    //取消用户关注事件
    $('#cancelUserConcernBtn').click(function () {
        var userId = $('#userId').val();
        var userFriendId = $('#userFriendId').val();

        $.ajax({
            type: "DELETE",
            url: "http://localhost:8081/user/cancelConcern/" + userId + "/" + userFriendId,
            success: function() {
                // 刷新页面
                location.reload();
            }
        });
    });

</script>

</html>